
<!DOCTYPE html>
<html>
<head>
	<title>动态图</title>
	<meta charset="utf-8">
	<style type="text/css">
	.box{
		width: 650px;
		height: 260px;
		padding-top: 100px;
		margin:auto;
	}
	#imgs{
		width: 426px;
		height: 246px;
	}


	</style>
</head>
<body>

<div class="box">
<button onclick="black()"><img src="images/left.png"></button>
<img src="images/img1.jpg" id="imgs" onmouseover="on()" onmouseout="out()">
<button onclick="show()"><img src="images/right.png"></button>
</div>
<script type="text/javascript">
var imgList="images/img1.jpg,images/img2.jpg,images/img3.jpg,images/img4.jpg,images/img5.jpg".split(',');
	
var index=0;
function show(){
	var imgs=document.getElementById('imgs');
	
	if(index==4){
		 index= -1;
	}
	imgs.src=imgList[++index];
}
function black(){
	var imgs=document.getElementById('imgs');
	
	if(index==0){
		 index= 5;
	}
	imgs.src=imgList[--index];
}
window.fd=time;
var dingshi;
function time(){
	dingshi=window.setInterval('show()',1000);
}
function on(){
	window.clearInterval(dingshi);
}
function out(){
	dingshi=window.setInterval('show()',1000);
}
</script>

</body>
</html>